import {Button, Modal, Form, Input, Radio, Select, DatePicker, Row, Col} from 'antd';
import React, {useEffect} from "react";
import moment from 'moment';
import locale from 'antd/es/date-picker/locale/zh_CN';
moment.locale('zh-cn');

const ComponentsModal = (props) =>{
  const isEdit = props.isEdit;
  // const isEdit = false;
  const dateFormat = 'YYYY-MM-DD HH:mm:ss';
  function getFormItem (column) {
    let node

    switch (column.inputType) {
      case 'select':
        node = getSelectNode(column)
        break

      case 'date':
        node = getDatePicker(column)
        break

      default:
        node = getInputNode(column)
        break
    }

    return node
  }
  function getSelectNode(column)  {
    return(
      <Form.Item
        name={column.dataIndex}
        label={column.title}
        rules={props.formRules[column.dataIndex]}

        initialValue={
          isEdit
            ?String(props.record[column.dataIndex])
            :""
        }
      >
        <Select>
          {column.options.map((values,index)=>{
            return (
              <Select.Option key={index} value={values.value}>{values.text}</Select.Option>
            )
          })}
        </Select>
      </Form.Item>
    );
  }
  function getDatePicker(column)  {
    return(
      <Form.Item
        name={column.dataIndex}
        label={column.title}
        rules={props.formRules[column.dataIndex]}
        initialValue={
          isEdit
            ?moment(props.record[column.dataIndex], dateFormat)
            :""
        }
      >
        <DatePicker
          showTime
          //对组件进行国际化
          locale={locale}
          style={{width:"100%"}}/>
      </Form.Item>
    );
  }
  function getInputNode(column)  {
    return(
      <Form.Item
        name={column.dataIndex}
        label={column.title}
        rules={props.formRules[column.dataIndex]}
        hidden={column.disShow}
        initialValue={
          isEdit
            ?String(props.record[column.dataIndex])
            :""
        }
      >
        <Input disabled={
          isEdit? column.disEdit : false
        } />
      </Form.Item>
    );
  }

  const [form] = Form.useForm();
  //初始化,当 props.visible 变化时执行,时间类型初始化得转换格式
  useEffect(() => {
    form.resetFields();
    // form.setFieldsValue({
    //   ...props.record,
    //   time: moment(props.record[time], dateFormat),
    //   status: Boolean(props.record.status)  //强制转换为boolean switch按钮
    // });
  }, [props.visible]);
  return (
    <Modal
      forceRender //预渲染 Modal
      visible={props.visible}
      title={props.title}
      okText="提交"
      cancelText="返回"
      onCancel={props.onCancel}
      onOk={() => {
        // form.submit;
        form
          .validateFields()
          .then(values => {
            form.resetFields();
            props.onSubmit(values);
          })
          .catch(info => {
            console.log('Validate Failed:', info);
          });
      }}

    >
      <Form layout="vertical"
            form={form}
            scrollToFirstError
        // hideRequiredMark
      >

        <Row gutter={16}>
          {props.columns.map((column,index)=>{
            return (
              <>
                {(!column.isAuto || isEdit)
                  ?<Col key={index} span={12}>
                    {getFormItem(column)}
                  </Col>
                  : ""
                }
              </>
            )
          })}

        </Row>

      </Form>

    </Modal>
  );
}
export default ComponentsModal;

